<template>
	<a-modal :title="title" :width="1200" :visible="visible" :confirmLoading="confirmLoading" :footer="null"
		@ok="handleSubmit" @cancel="handleCancel">

		<a-card :bordered="false">
			<s-table ref="table" size="default" :columns="columns" :data="getData" :alert="true" :showPagination="true"
				:rowKey="(record) => record.code" :rowSelection="null">
				<span slot="materialModelNumber" slot-scope="text, record">
					{{ record.material ? record.material.materialModelNumber : '' }}
				</span>
				<!-- <span slot="image" slot-scope="text">
					<image-preview :images="text" />
				</span> -->
				<span slot="image" slot-scope="text,record">
					<image-preview1 :images="text" :imageUrl="record.imageUrl" />
				</span>
			</s-table>

		</a-card>
	</a-modal>
</template>

<script lang="ts">
import { Component, Vue, Ref } from "vue-property-decorator";

import { STable } from '@/components'
import { page } from '@/api/modular/main/emsordermaterial/emsOrderMaterialManage.js'


@Component({
	components: {
		STable,
	}
})
export default class ProductionBackStoreRecordModal extends Vue {
	@Ref() readonly table!: any

	visible = false
	title = '退库记录'
	confirmLoading = false
	// 查询参数
	queryParam = {
		sourceOrderMaterialId: '',
	}
	columns = [
		{
			align: 'center',
			title: '序号', width: '80px',
			dataIndex: '',
			customRender(text: any, record, index: number) {
				return `${index + 1}`
			}
		},
		{
			title: '订单单号',
			dataIndex: 'orderNumber'
		},
		{
			title: '物料编号',
			dataIndex: 'materialCode'
		},

		{
			title: '物料名称',
			dataIndex: 'materialName'
		}, {
			title: '规格',
			dataIndex: 'materialModelNumber',
			scopedSlots: { customRender: 'materialModelNumber' }
		}, {
			title: '图片',
			dataIndex: 'image',
			scopedSlots: { customRender: 'image' }
		}, {
			title: '关联单号',
			dataIndex: 'ckOrderNumber'
		}, {
			title: '退库数量',
			dataIndex: 'number'
		},
		{
			title: '入库时间',
			dataIndex: 'createTime'
		},
	]
	emsOrder = {}

	get routePath() {
		let urlParam = this.$util.getUrlParam(this.$route.path)
		return urlParam
	}

	get materialType() {
		return this.routePath?.materialType || this.$businessEnum.MATERIAL_TYPE_ENUM.material.id
	}

	getData(parameter: { pageNo: number, pageSize: number }) {
		const params = {
			...parameter,
			...this.queryParam,
			planOrderType: 1,
			materialType: this.materialType
		}
		return page(params).then((res) => {
			return res.data
		})
	}


	show(record) {
		this.visible = true
		this.emsOrder = record
		this.queryParam.sourceOrderMaterialId = record.orderMaterialId
		setTimeout(() => {
			this.handleOk()
		}, 100)
	}


	handleOk() {
		this.table.refresh()
	}

	handleSubmit() {
		this.visible = false
	}

	handleCancel() {
		this.visible = false
	}


}
</script>

<style lang="less">
.table-operator {
	margin-bottom: 18px;
}

button {
	margin-right: 8px;
}
</style>
